<template>
  <div class="control-main-top">
    <div class="control-item" style="flex:1">
      多智能体系统接受环境信息后做出决策的时间为102.7ms。
      多智能体系统群体决策做出收敛的潮流决策时，给予协作的智能体协同奖励为1。对决策结果产生冲突的智能体，给予相应的惩罚为-1。
    </div>
    <div :style="{ width: $computeVw(20) }"></div>
    <div class="control-item top-right">
      <span class="control-title">信息熵数据</span>
      <!-- 这里写 面板里面的内容-->
      <el-image :src="photo.url" fit="cover" class="photo"></el-image>
      <span>{{ photo.fileName }} </span>
    </div>
  </div>
  <div class="control-main-bottom">
    <div class="control-item bottom-left">
      <span class="control-title">智能体确定系数表</span>
      <el-table :data="tableData"
        style="max-height:100%;--el-table-border-color: none;overflow-y: auto;background-color: #192E37;"
        :style="{ 'margin-top': $computeVw(20) }" :row-class-name="getClassName" :header-cell-style="customHeaderCell"
        :cell-style="customCell">
        <el-table-column prop="coefficient" label="不确定度系数" width="200" />
        <el-table-column prop="robot1" label="智能体1" />
        <el-table-column prop="robot2" label="智能体2" />
        <el-table-column prop="robot3" label="智能体2" />
        <el-table-column prop="robot4" label="智能体2" />
        <el-table-column prop="robot5" label="智能体2" />
        <el-table-column prop="robot6" label="智能体2" />
        <el-table-column prop="robot7" label="智能体2" />
      </el-table>
    </div>
    <div :style="{ width: $computeVw(20) }"></div>
    <div class="control-item bottom-right">
      <span class="control-title">智能体损益展示</span>
      <div class="tips-box">
        <div class="item-box">
          <span>种群策略损益</span>
          <el-input v-model="form.name" :readonly="true" />
        </div>
        <div class="item-box">
          <span>种群策略损益</span>
          <el-input v-model="form.history" :readonly="true" />
        </div>
        <div class="item-box">
          <span>显示策略后验损益</span>
          <el-input v-model="form.display" :readonly="true" />
        </div>
        <div class="item-box">
          <span>种群策略置信度</span>
          <el-input v-model="form.trust" :readonly="true" />
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { computed, defineComponent, ref, watch } from "vue";
import wordImg from '@/assets/shanginfo.png';
import elTableMixin from '@/utils/elTableMixin.js'

const { customHeaderCell, customCell, getClassName } = elTableMixin();

const photo = ref({
  url: wordImg,
  fileName: '信息熵度量计算 : 0.2676'
})

const form = ref({
  name: '0.2401',
  history: '0.1472',
  display: '0.1483',
  trust: '0.934'
})

const tableData2 = ref([
  {
    groupPayOff: '0.2401',
    historyPayOff: '',
  }
])

const tableData = ref([
  {
    'coefficient': '决策策略不确定度',
    'robot1': '0.0598',
    'robot2': '0.0254',
    'robot3': '0.0005',
    'robot4': '0.0005',
    'robot5': '0.0002',
    'robot6': '0.0002',
    'robot7': '0.0001',
    'robot8': '0.0026'
  },
  {
    'coefficient': '观测状态不确定度',
    'robot1': '0.0826',
    'robot2': '0.0803',
    'robot3': '0.0945',
    'robot4': '0.0746',
    'robot5': '0.1103',
    'robot6': '0.0776',
    'robot7': '0.1014',
    'robot8': '0.1608'
  },
  {
    'coefficient': '多智能体间不确定度',
    'robot1': '0.0751',
    'robot2': '0.022',
    'robot3': '0.0573',
    'robot4': '0.0118',
    'robot5': '0.0338',
    'robot6': '0.0319',
    'robot7': '0.0346',
    'robot8': '0.0405'
  }
])
</script>

<style scoped lang="scss">
.photo {
  width: computeVw(190);
  margin: computeVh(20) 0;
}

.el-input {
  width: computeVw(100);
}

.control-item {
  background-color: #192E37;
  border: 1px solid #2f606b;
  padding: computeVw(20);
}

.control-main-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: computeVh(20);

  .top-right {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}

.control-main-bottom {
  display: flex;
  justify-content: space-between;

  .bottom-left {
    flex: 1;
  }

  .bottom-right {
    flex: 1;
    display: flex;
    flex-direction: column;

  }

  .tips-box {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item-box {
      width: 36%;
      height: computeVh(50);
      display: flex;
      align-items: center;
      padding-right: 10%;
      margin-top: 10px;

      span {
        display: block;
        width: computeVw(150);
      }
    }
  }

}

.control-title {
  font-weight: bold;
  font-size: computeVw(18);
  color: #00D7BE;
  // margin-bottom: 10px;
}
</style>
